import React from 'react';
import { Button, Carousel,List, InputItem, WhiteSpace, Picker, DatePicker, TextareaItem } from 'antd-mobile';
import { district, provinceLite } from 'antd-mobile-demo-data';
import './identityconfirm.css';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import { createForm } from 'rc-form';
import UserStore from '../../store/UserStore.js';
import { observer } from 'mobx-react';
import { observable, computed, action } from 'mobx';
import "babel-polyfill";
const sex = [
  {
    key: 1,
    label: '男',
    value: 'male' 
  },  
  {
    key: 2,
    label: '女',
    value: 'female' 
  }, 
];
const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);
// GMT is not currently observed in the UK. So use UTC now.
const utcNow = new Date(now.getTime() + (now.getTimezoneOffset() * 60000));
let minDate = new Date(nowTimeStamp - 1e7);
const maxDate = new Date(nowTimeStamp + 1e7);
// console.log(minDate, maxDate);
if (minDate.getDate() !== maxDate.getDate()) {
  // set the minDate to the 0 of maxDate
  minDate = new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate());
}
function formatDate(date) {
  /* eslint no-confusing-arrow: 0 */
  const pad = n => n < 10 ? `0${n}` : n;
  const dateStr = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
  const timeStr = `${pad(date.getHours())}:${pad(date.getMinutes())}`;
  return `${dateStr} ${timeStr}`;
}

const CustomChildren = props => (
    <div
      onClick={props.onClick}
      style={{ backgroundColor: '#fff', paddingLeft: 15 }}
    >
      <div className="test" style={{ display: 'flex', height: '45px', lineHeight: '45px' }}>
        <div style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{props.children}</div>
        <div style={{ textAlign: 'right', color: '#888', marginRight: 15 }}>{props.extra}</div>
      </div>
    </div>
  );
class IdentityConfirm extends React.Component {        
    constructor(props) {
        super(props);         
        this.state = {
            type: 'money',            
            cols: 1,
            pickerValue: [],
            asyncValue: [],
            sValue: ['2013', '春'],            
            date: now,
            time: now,
            utcDate: utcNow,
            dpValue: null,
            customChildValue: null,
            visible: false,
            startDate: now,
            endDate: now
        }  
        
    };    
    async componentDidMount() {
      let isLogin = await UserStore.checkLogin();
      this.setState({ isLogin });
      if ( !isLogin ) {
          this.props.history.push('/login');
      }     
    }
    render() {        
        const { getFieldProps } = this.props.form;
        return (
          <div>            
            <List>   
              <InputItem
                {...getFieldProps('bankCard', {
                 
                })}
                placeholder="请输入银行卡号"
                type="bankCard"
              >身份证号</InputItem>         
              <InputItem
                {...getFieldProps('name')}
                clear
                placeholder="请输入姓名"
                ref={el => this.autoFocusInst = el}
              >姓名</InputItem>                        
            </List>            
            <InputItem
                {...getFieldProps('major')}
                clear
                placeholder="请输入民族"
                ref={el => this.major = el}
            >民族</InputItem>  
            <Picker data={sex} cols={1} {...getFieldProps('district3')} className="forss">
                <List.Item arrow="horizontal">性别</List.Item>
            </Picker>
            <DatePicker
                mode="date"
                title="选择生日"
                extra="Optional"
                value={this.state.date}
                onChange={date => this.setState({ date })}
            >
                <List.Item arrow="horizontal">生日</List.Item>
            </DatePicker>    
            <TextareaItem
              title="地址"
              placeholder="请输入地址"
              data-seed="logId"
              autoHeight
              ref={el => this.customFocusInst = el}
            />            
            <TextareaItem
              title="签证机关"
              placeholder="请输入签证机关"
              data-seed="logId"
              autoHeight
              ref={el => this.customFocusInst = el}
            />            
            <DatePicker
                mode="date"
                title="选择开始日期"
                extra="Optional"
                value={this.state.startDate}
                onChange={startDate => this.setState({ startDate })}
            >
                <List.Item arrow="horizontal">身份证有效期开始日期</List.Item>  
            </DatePicker>
            <DatePicker
                mode="date"
                title="选择截止日期"
                extra="Optional"
                value={this.state.endDate}
                onChange={endDate => this.setState({ endDate })}
            >
                <List.Item arrow="horizontal">身份证有效期截止日期</List.Item>
            </DatePicker>
            <div className="identityconfirm-bottom-fixed-button">
                完成
              </div>
            </div>
        );
      }
}
//导出组件；
const H5NumberInputExampleWrapper = createForm()(IdentityConfirm);
export default H5NumberInputExampleWrapper;
